<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件基础-事件,v-model</title>
    <style>
        div,
        .e-adder {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <e-adder @add="handleAdd"></e-adder>
        <e-adder @add-num="num+=$event" :num="num"></e-adder>
        <e-comp v-model="str"></e-comp>
        <e-comp v-model.upper="str"></e-comp>
        <div>{{str}}</div>
        <my-test v-model:digit="digit"></my-test>
        <div>{{digit}}</div>
    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    num: 10,
                    str: 'world',
                    digit: 6
                }
            },
            methods: {
                handleAdd(e) {
                    this.num += e;
                }
            }
        });
        app.component("e-adder", {
            template: `<button @click='add'>add{{num}}</button>`,
            props: {
                num: Number
            },
            methods: {
                add() {
                    this.$emit("add", 1);
                    this.$emit("addNum", 1);
                },
            },
            // emits:["add","addNum"]
            emits: {
                add(val) {
                    if (typeof val === "number") {
                        return true
                    } else {
                        return false
                    }
                },
                addNum: true
            }
        })
        app.component("e-comp", {
            template: `<div @click="hclick">{{modelValue}}</div>`,
            props: {
                modelValue: String,
                modelModifiers: {
                    default: () => ({})
                }
            },
            emits: ['update:modelValue'],
            methods: {
                hclick() {
                    if (this.modelModifiers.upper) {
                        this.$emit('update:modelValue', 'HELLO');
                    } else {
                        this.$emit('update:modelValue', 'hello');
                    }
                }
            }
        });
        app.component("my-test", {
            template: `<div @click="add">{{digit}}</div>`,
            props: { digit: Number },
            emits: { 'update:digit': true },
            methods: {
                add() {
                    this.n++;
                    this.$emit('update:digit', this.n);
                }
            },
            data() {
                return { n: 1 }
            }
        })
        app.mount('#app');
    </script>
</body>

</html>